<!DOCTYPE html>
<html>
<head>
	<title>Sortable Table using Polymer Web Components</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<script src="../../platform/platform.js"></script>
	<link rel="import" href="../sortable-table.html">
	<link rel="import" href="fruit-icon.html">
	<link rel="import" href="index-links.html">

	<style>
		sortable-table { width: 800px; }
	</style>
</head>
<body unresolved>

	<h2>Refreshing <code>data</code> should work</h2>
	It seems that the bound <code>data</code> is sorted by the web component. Sort should be maintained on data refresh.

	<p>

	<template id="example" bind>
		<sortable-table defaultStyle data="{{data}}" columns="{{columns}}" sortColumn="id">
			<template id="fruitsTemplate">
				<td style="width:75px;text-align:center;">
					<fruit-icon fruit="{{value}}"></fruit-icon>
				</td>
			</template>
		</sortable-table>
	</template>

	<h2>Change single fields within <code>row</code> data should update</h2>
	<em style="color:red">Not implemented. Table does not update when only individual fields change. Only entire rows are monitored.</em>

	<p>

	<template id="example2" bind>
		<sortable-table defaultStyle data="{{data}}" columns="{{columns}}" sortColumn="id">
			<template id="fruitsTemplate">
				<td style="width:75px;text-align:center;">
					<fruit-icon fruit="{{value}}"></fruit-icon>
				</td>
			</template>
		</sortable-table>
	</template>

	<script>
	var data = [
		{id: 0, fruit: 'apple', alice: 4, bill: 10, casey: 2 },
		{id: 1, fruit: 'banana', alice: 0, bill: 4, casey: 0 },
		{id: 2, fruit: 'grape', alice: 2, bill: 3, casey: 5 },
		{id: 3, fruit: 'pear', alice: 4, bill: 2, casey: 8 },
		{id: 4, fruit: 'strawberry', alice: 0, bill: 14, casey: 0 }
	];
	var dataMaxId = 5;

	var hotData = data.slice(0);

	var columns = [
		{name: 'id', title: 'ID' },
		{name:'fruit', title:'Fruit', cellTemplate: 'fruitsTemplate' },
		{name:'alice', title:'Alice' },
		{name:'bill', title:'Bill' },
		{name:'casey', title:'Casey' }
	];

	var fruit = ['apple','banana','grape','pear','strawberry'];

	function updateData(){
		data = data.slice(1);
		data.push({
			id: dataMaxId++,
			fruit: fruit[Math.floor(Math.random()*5)],
			alice: Math.floor(Math.random()*16),
			bill: Math.floor(Math.random()*16),
			casey: Math.floor(Math.random()*16)
		});

		document.getElementById('example').model.data = data.slice();

		setTimeout(updateData, 500);
	}

	function updateHotData(){
		//find a random row
		var r = Math.floor(Math.random()*5);
		//find a random person
		var c = columns[2 + Math.floor(Math.random()*3)].name;
		//pick a random value
		hotData[r][c] = Math.floor(Math.random()*16);
		console.log(r + ':' + c + '-' + hotData[r].id + ':' + hotData[r].fruit + ':' + hotData[r].alice + ':' + hotData[r].bill + ':' + hotData[r].casey);
		setTimeout(updateHotData, 500);
	}

	window.addEventListener('polymer-ready', function(){
		document.getElementById('example').model = {
			data: data,
			columns: columns
		};
		updateData();

		document.getElementById('example2').model = {
			data: hotData,
			columns: columns
		};
		updateHotData();
	});
	</script>

	<index-links page="refreshing-data.html"></index-links>
</body>
</html>